<template>
	<div style="min-height: 34px;">
		<div class="left" style="width: 30%;">

				<el-select size="small" class="left" style="width: calc(50% - 10px);margin-right: 10px;" clearable v-model="page.shi" value-key="name" :title="page.shi.name" filterable placeholder="请选择市"
				 @change="xzshi">
					<el-option v-for="item in search.shi" :key="item.areaId" :label="item.name" :value="item">
					</el-option>
				</el-select>
				<el-select size="small" class="left" style="width: calc(50% - 10px); margin-right: 10px;" clearable v-model="page.xian" value-key="name" :title="page.xian.name" filterable
				 placeholder="请选择区县" @change="xzxian">
					<el-option-group v-for="group in search.xian" :key="group.name">
						<el-option v-for="item in group.childs" :key="item.areaId" :label="item.name" :value="item">
						</el-option>
					</el-option-group>
					<!-- <el-option v-for="item in search.xian" :key="item.areaId" :label="item.name" :value="item.areaId">
				</el-option> -->
				</el-select>

		</div>
		<el-row style="width: calc(70% - 145px ); float: left;">

			<el-col :span="6" style="padding-right: 10px;">
				<el-select size="small" v-model="daili.orgDept" value-key="name" filterable multiple placeholder="请选择部门" @change="xzbumen">
					<el-option v-for="item in data.org_dept" :key="item.id" :label="item.name" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="6" style="padding-right: 10px;">
				<el-input size="small" v-model="page.itemName" placeholder="请输入事项名称"></el-input>
			</el-col>
			<el-col :span="6" style="padding-right: 10px;">
				<el-input size="small" v-model="page.itemCodeProd" placeholder="请输入事项编码"></el-input>
			</el-col>
			<el-col :span="6" style="padding-right: 10px;">
				<el-select size="small" v-model="page.itemType" clearable placeholder="请选择事项性质" @change="xzxz">
					<el-option v-for="item in data.Item_nature" :key="item.value" :label="item.name" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<div style="width: 145px; float: right;">
			<el-button size="small" class="right" style="margin-left:15px" type="primary" plain @click="isshow.more=!isshow.more">更多</el-button>
			<el-button size="small"  class="right" type="primary"  @click="listData">搜索</el-button>
		</div>
		<el-form label-width="160px" class="searchForm" style="clear:left" v-if="isshow.more">
			<el-row class="row">

				<el-col :span="12">
					<el-form-item label="是否实现最多跑一次:">
						<el-radio :label="a.value" v-model="page.implRunOnce" v-for="(a,index) in data.handleStatus" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否实现零跑腿:">
						<el-radio :label="a.value" v-model="page.implRunZero" v-for="(a,index) in  data.handleStatus" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>
				</el-row>
				<el-row class="row">


				<el-col :span="12">
					<el-form-item label="是否实现基层延伸:">
						<el-radio :label="a.value" v-model="page.implBaseExt" v-for="(a,index) in  data.handleStatus" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否实现一证通办:">
						<el-radio :label="a.value" v-model="page.implOneHand" v-for="(a,index) in  data.handleStatus" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>
				</el-row>
				<el-row class="row">
				<!--
		* 新增
		* -->
				<el-col :span="12">
					<el-form-item label="是否实现合无证明办事:">
						<el-radio :label="a.value" v-model="page.implNoProve" v-for="(a,index) in  data.handleStatus" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否进驻中心:">
						<el-radio :label="a.value" v-model="page.toCenter" v-for="(a,index) in shifou" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="row">
				<el-col :span="12">
					<el-form-item label="是否实现一网式集成:" title="是否实现一网式集成套餐服务">
						<el-radio :label="a.value" v-model="page.implNetIntegration" v-for="(a,index) in shifou" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="是否告知承诺事项:">
						<el-radio :label="a.value" v-model="page.promiseItem" v-for="(a,index) in shifou" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>

				</el-row>
				<el-row class="row">
				<el-col :span="12">
					<el-form-item label="是否容缺受理事项:">
						<el-radio :label="a.value" v-model="page.lackHandItem" v-for="(a,index) in shifou" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否收费事项:">
						<el-radio :label="a.value" v-model="page.chargeItem" v-for="(a,index) in shifou" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>

				</el-row>
				<el-row class="row">
				<el-col :span="12">
					<el-form-item label="是否中介服务事项:">
						<el-radio :label="a.value" v-model="page.intermediaryServiceItem" v-for="(a,index) in shifou" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否对接上线:">
						<el-radio :label="a.value" v-model="page.joinOnline" v-for="(a,index) in shifou" :key="index">{{a.name}}</el-radio>
					</el-form-item>
				</el-col>

			</el-row>
			<el-row class="row">
				<el-col :span="24">
					<el-form-item label="通办范围:">
						<el-checkbox-group v-model="daili.handScope">
							<el-checkbox v-for="(a,index) in data.general_scope" :key="index" :label="a.value">{{a.name}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>

			</el-row>
			<el-row class="row">
				<el-col :span="24">
					<el-form-item label="移动办事渠道:">
						<el-checkbox-group v-model="daili.appType">
							<el-checkbox v-for="(a,index) in data.mobile_channels" :key="index" :label="a.value">{{a.name}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>

			</el-row>
			<el-row class="row">
				<el-col :span="24">
					<el-form-item label="与一窗对接模式:">
						<el-checkbox-group v-model="daili.winJoinType">
							<el-checkbox v-for="(a,index) in data.docking_with_window" :key="index" :label="a.value">{{a.name}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>

			</el-row>
			<el-row class="row" v-if="isshow.xz">
				<el-col :span="24">
					<el-form-item label="行政权力事项:">
						<el-checkbox-group v-model="daili.adminItemType">
							<el-checkbox v-for="(a,index) in data.executive_power" :key="index" :label="a.value">{{a.name}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>

			</el-row>
			<el-row class="row" v-if="isshow.gg">
				<el-col :span="24">
					<el-form-item label="公共服务事项:">
						<el-checkbox-group v-model="daili.commonItemType">
							<el-checkbox v-for="(a,index) in data.public_services" :key="index" :label="a.value">{{a.name}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin-top:10px">
				<el-col :span="6" :offset="9">
					<el-button size="small" @click="chongzhi">重置筛选</el-button>
					<el-button size="small" type="primary" plain @click="isshow.more=false">收起</el-button>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: 'search',
		data() {
			return {
				isshow: {
					more: false,
					gg: false,
					xz: false
				},
				shifou: [
					{
						name: '是',
						value: '1'
					},
					{
						name: '否',
						value: '0'
					},
					{
							name: '全部',
							value: ''
						}
				],
				quanbu: {
						name: '全部',
						value: ''
					}
				,
				daili: {
					winJoinType: [],
					commonItemType: [],
					adminItemType: [],
					orgDept: [], //部门
					handScope: [], //通办范围
					appType: [], //移动办事渠道
				},
				page: {
					shi: '',
					xian: '',
					areaId: '',
					itemCodeProd: '', //事项代码
					itemName: '', //事项名称
					implRunZero: '', //是否实现跑零次
					implOneHand: '', //是否实现一证通办事项
					implBaseExt: '', //是否实现向基层延伸
					joinOnline: '', //是否对接上线
					intermediaryServiceItem: '', //是否中介
					chargeItem: '', //是否收费
					lackHandItem: '', // 是否容缺受理事项
					promiseItem: '', //是否告知承诺事项
					implNetIntegration: '', //是否实现一网式集成套餐服务
					implNoProve: '', //是否实现无证明办事
					implRunOnce: '', //是否实现最多一次事项
					toCenter: '', //是否进驻中心
					itemType: ''

				},
				search: {
					shi: [],
					xian: [],
				},
				data: {},
			}
		},
		mounted() {
			this.getShi()
			this.getData()
		},
		methods: {
			xzxz(val) {
				this.isshow.xz = false;
				this.isshow.gg = false
				for (var i in this.data.Item_nature) {
					var data = this.data.Item_nature[i]
					if (val == data.value && data.name.indexOf("行政") > -1) {
						this.isshow.xz = true;
						this.isshow.gg = false;
						this.page.commonItemType = []
					} else if (val == data.value && data.name.indexOf("公共") > -1) {
						this.isshow.xz = false;
						this.isshow.gg = true
						this.page.adminItemType = []
					}
				}

			},
			chongzhi() {
				this.daili = {
					winJoinType: [],
					commonItemType: [],
					adminItemType: [],
					orgDept: [], //部门
					handScope: [], //通办范围
					appType: [], //移动办事渠道
				}
				this.page = {
					shi: '',
					xian: '',
					areaId: '',
					itemCodeProd: '', //事项代码
					itemName: '', //事项名称
					implRunZero: '', //是否实现跑零次
					implOneHand: '', //是否实现一证通办事项
					implBaseExt: '', //是否实现向基层延伸
					joinOnline: '', //是否对接上线
					intermediaryServiceItem: '', //是否中介
					chargeItem: '', //是否收费
					lackHandItem: '', // 是否容缺受理事项
					promiseItem: '', //是否告知承诺事项
					implNetIntegration: '', //是否实现一网式集成套餐服务
					implNoProve: '', //是否实现无证明办事
					implRunOnce: '', //是否实现最多一次事项
					toCenter: '', //是否进驻中心
					itemType: ''
				}
			},

			getData() { //得到字典内信息
				var shuxing =
					'org_dept,Item_nature,general_scope,mobile_channels,docking_with_window,public_services,executive_power,handleStatus';
				this.$get("/dict/getDictTypes/" + shuxing).then(r => {
					if(r.data.data.handleStatus.length)
					r.data.data.handleStatus.push(this.quanbu)
					this.data = r.data.data;
				})
			},
			xzxian(val) { //选择县
				if (!val) {
					return this.page.xian = ''
				}
				this.page.xian = val;
			},
			xzbumen(val) { //选择部门
				this.page.orgDept = val
			},
			xzshi(val) { //选择市
				if (!val) {
					this.page.shi = '';
					this.search.xian = [];
					return false;
				}
				this.page.xian = '';
				this.page.shi = val
				if (val.areaId.length > 0) {
					this.$get("/area/child?parentIds=" + val.areaId).then(r => {
						this.search.xian = r.data.data;
					})
				}
			},
			getShi() { //获取市
				this.$get("/area/2/child").then(r => {
					this.search.shi = r.data.data;
				})
			},
			listData() {
				this.page.areaId = '';
				/* if(typeof(this.page.xian) == 'object'&&typeof(this.page.shi) == 'object'){
					if(this.page.xian.length > 0){
						this.page.areaId = this.page.xian.join(",")
					}else if(this.page.shi.length > 0){
						this.page.areaId = this.page.shi.join(",")
					}else{
						this.page.areaId =''
					}
				} */
				if (this.page.shi !== '') {
					this.page.areaId = this.page.shi.areaId
				}
				if (this.page.xian !== '') {
					this.page.areaId = this.page.xian.areaId
				}
				if (typeof(this.daili.orgDept) == 'object') {
					if (this.daili.orgDept.length > 0) {
						this.page.orgDept = this.daili.orgDept.join(",")
					} else {
						this.page.orgDept = ''
					}
				}

				if (typeof(this.daili.handScope) == 'object') {
					if (this.daili.handScope.length > 0) {
						this.page.handScope = this.daili.handScope.join(",")
					} else {
						this.page.handScope = ''
					}
				}
				if (typeof(this.daili.appType) == 'object') {
					if (this.daili.appType.length > 0) {
						this.page.appType = this.daili.appType.join(",")
					} else {
						this.page.appType = ''
					}
				}
				if (typeof(this.daili.commonItemType) == 'object') {
					if (this.daili.commonItemType.length > 0) {
						this.page.commonItemType = this.daili.commonItemType.join(",")
					} else {
						this.page.commonItemType = ""
					}
				}
				if (typeof(this.daili.adminItemType) == 'object') {
					if (this.daili.adminItemType.length > 0) {
						this.page.adminItemType = this.daili.adminItemType.join(",")
					} else {
						this.page.adminItemType = ''
					}
				}
				if (typeof(this.daili.winJoinType) == 'object') {
					if (this.daili.winJoinType.length > 0) {
						this.page.winJoinType = this.daili.winJoinType.join(",")
					} else {
						this.page.winJoinType = ''
					}
				}
				this.$emit("test", this.page)
			}
		}
	};
</script>

<style scoped>
	.searchForm {
		margin-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: dashed 1px #ccc;
	}

	.searchForm .row {
		border-bottom: dashed 1px #ccc;
	}

	.searchForm .row .el-form-item {
		margin: 5px 0
	}
</style>
